<template>
    <div class="fluid field myfield" :class="{disabled: data.readonly}" :_name="data.name">
        <label :class="{must: data.is_must}">{{data.label}}</label>
        <mytable v-if="fields&&has_bindNames&&!loading" :fields="fields" :url="url" :checkType="checkType" :val="val" :ctl="bindModel" :lines="lines"
                 :field="tfield" :name="data.name" @changePage="changePage" :total="total"
                 :bindNames="bindNames" :data_type="data.data_type" :loading="loading" @doBindSearch="doBindSearch"
                 @clearSearch="clearSearch" @setVal="setVal"></mytable>
        <!--v-if="lines.length>0" -->
    </div>
</template>

<script>
    import tool from 'src/util/tool';
    import util from '_util/index';
    import logic from '_logic';
    import mytable from 'components/form/table'
    var in_array = require('in_array');

    export default {
        data() {
            return {
                val: '',
                url: '',
                loading: false,
                name_binded: false,
                bindNames: null,
                _names: null,
                page: 1,
                total: 0,
                total_bak: 0,
                fields: null,
//        fields: [
//          'id', 'title', 'name', 'create_time', 'update_time'
//        ],
//        titles: [
//          '选择', 'ID', '名称', '英文名', '创建时间', '更新时间'
//        ],
                lines: {},
                model_name: '',
                bindModel: '',
                tfield:'',
            }
        },
        methods: {
            reset() {
                this.total=0
                this.lines={}
                this.fields=null
                logic.edit.bind_fields(this)
            },
            clearSearch() {
                this.page = 1
                this.getAttr()
            },
            bind_search_modal({vo,mid,field_name}) {
//                tool.cl('field_name==this.field.name 2', field_name, this.field.name);
                if(mid==this.bind_mid&&field_name==this.field.name) {

                    this.doBindSearch(this.url, vo);
                }

            },
//            bind_search_modal({vo,mid}) {
//                if(mid==this.bind_mid) {
//                    vo.isSearch = 1;
//                    this.doBindSearch(this.url, vo);
//                }
//
//            },
            doBindSearch(url, param) {
                this.loading = true

                param.p = 1
                param.length = tool.BIND_ROW_NUM

                this.getData(url, param)

            },
            getData(url, param) {
                let joint= url.indexOf(url,'?')!==-1?'&':'?'
                url += `${joint}from_bind=1`;

                util.getDataCom(this, url, param, (rs) => {
                    this.lines = rs.lines
                    this.total = rs.total

                    this.loading = false
                },()=> {
                    setTimeout(() => {
                        this.loading = false
                    }, 5000);
                })
            },
            changePage(page) {
                this.page = page
                this.getAttr()
            },
            setVal(tableSelected, names) {
                this.val = tableSelected;
                this._names = names;
                this.$emit("onchange", {name: this.data.name, value: tableSelected, raw: this.data._raw})
                if (this.data.bind_name_field && names) {
//          this.$emit('setVo', this.data.bind_name_field, names);

                }
            },
            getAttr() {
                this.loading = true

                let url = tool.getApi(this, this.bindModel);
                if (this.data.bind_param)
                    url += '?' + this.data.bind_param

                let param = {}
                param.p = this.page
                param.length = tool.BIND_ROW_NUM
                this.getData(url, param)
            },
            getCtl(mid) {
                let model = util.store.getModelByMid(this, mid)||{};
                return model.name;
            },
            getbindModel() {
                let mid = this.data.bindModel
                this.bindModel = this.getCtl(mid);

                this.url = tool.getApi(null, this.bindModel);
                if (this.data.bind_param)
                    this.url += '?' + this.data.bind_param
            },
        },
        watch: {
            'data.bindModel': function (val, old) {
                if(val!=old){
                    this.getbindModel()
                    this.reset()
                }
            },
            val: function (val, old) {
                let tmp = null;
                if (this.data.bind_type == 1) {
                    if (this.data.data_type == 1) {
                        if (util.isArray(val)) {
                            tmp = val.join('|');
                        } else {
                            tmp = val;
                        }

                    } else {
                        tmp = JSON.stringify(val);
                    }
                } else{
                    if(val&&in_array(this.from,['mypop'])) {
                        this.$emit('toHide')
                    }
                    tmp = val;
                }

                this.$emit('setVo', this.data.name, tmp, this._names);
            }
        },
        computed: {
            bind_mid() {
                return this.data.bindModel;
            },
            has_bindNames() {
				let op = this.$store.state.global.op;
				let b1 = op == 'insert' || this.fromMypop;
                if(b1&&!this.data.needBind)
                    return true;
//        return Boolean(this.bindNames);
                return this.name_binded||!Boolean(this.data.fval);
            },
            checkType(){
                return this.data.bind_type == 1 ? 'checkbox' : 'radio';
            }
        },
        props: ['field', 'data', 'ctl','from', 'placeholder', 'fromMypop'],
        destroyed() {
        },
        created() {
            this.tfield = Object.assign({fval:this.field.value}, this.field);
			this.getbindModel()
			util.myutil(this, ()=> {
				let mid = this.field.bindModel
                this.bindModel = this.getCtl(mid);
                return this.bindModel
            }, () => {
                logic.edit.bind_fields(this);
            },0,50);
            if (this.data.value) {
                this.val = this.data.value;
                util.myutil(this, ()=> {
                    return this.bindModel
                }, () => {
                    logic.edit.getBindName(this);
                },0,0);
            }

            util.eventOn(this, 'bind_search_modal', this.bind_search_modal);
        },
        components: {
            mytable,
        },
        mounted() {
        }
    };
</script>

<style rel="stylesheet/less" lang="less" scoped>
    .fluid.field {
    }</style>
